<template>
  <el-dialog v-if="dialogVisiable" v-model="dialogVisiable" title="任务选择" width="1000px">
    <el-form ref="queryFormRef" v-model="queryParams" inline size="small">
      <el-form-item prop="modelType" label="机型">
        <el-input v-model="queryParams.modelType" disabled placeholder="请输入" style="width: 180px" />
      </el-form-item>
      <el-form-item prop="loadName" label="载荷类型">
        <el-input v-model="queryParams.loadName" disabled placeholder="请输入" style="width: 180px" />
      </el-form-item>
      <el-form-item prop="taskName" label="任务名称">
        <el-input v-model="queryParams.taskName" placeholder="请输入" style="width: 180px" />
      </el-form-item>
      <el-form-item label="载荷分类" prop="loadType">
        <el-select v-model="queryParams.loadType" clearable style="width: 180px">
          <el-option v-for="(item, index) in pageLoadTypes" :key="'name' + index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="阶段" prop="stage">
        <el-select v-model="queryParams.stage" clearable style="width: 180px">
          <el-option v-for="(item, index) in pageStages" :key="'stage' + index" :label="item.label" :value="item.label" />
        </el-select>
      </el-form-item>
      <el-form-item label="版本号" prop="version">
        <el-input v-model="queryParams.version" placeholder="请输入" style="width: 180px" />
      </el-form-item>
      <el-form-item label="创建日期">
        <el-date-picker
          v-model="dateRangeCreateTime"
          style="width: 240px"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          range-separator="-"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          :default-time="[new Date(2000, 1, 1, 0, 0, 0), new Date(2000, 1, 1, 23, 59, 59)]"
        ></el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="handleQuery">查询</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- <el-button>批量选择</el-button> -->
    <el-table v-loading="loading" :data="tableDatas" height="250" @selection-change="handleSelectionChange">
      <el-table-column width="50" type="selection" align="center"></el-table-column>
      <el-table-column label="序号" width="50" type="index" align="center">
        <template #default="scope">
          <span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="任务名称" align="center" prop="loadExperimentName"></el-table-column>
      <el-table-column label="机型" align="center" prop="modelType"></el-table-column>
      <el-table-column label="载荷分类" align="center" prop="loadType"></el-table-column>
      <el-table-column label="阶段" align="center" prop="stage"></el-table-column>
      <el-table-column label="载荷版本号" align="center" prop="version" />
      <el-table-column label="轮次" align="center" prop="round" />
      <el-table-column label="版本状态" align="center" prop="versionState" />
      <el-table-column label="状态" align="center" prop="state" width="200"></el-table-column>
      <el-table-column label="创建人" align="center" prop="createBy" />
      <el-table-column label="创建日期" align="center" prop="createTime" width="180">
        <template #default="scope">
          <span>{{ parseTime(scope.row.createTime, '{y}-{m}-{d}') }}</span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="操作" align="center" width="400">
        <template #default="scope">
          <el-button size="small" link type="primary">选择</el-button>
        </template>
      </el-table-column> -->
    </el-table>
    <div class="pagenation">
      <pagination
        v-show="total > 0"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        layout="prev, pager, next,jumper"
        :total="total"
        @pagination="getList"
      />
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="closeDialog">关闭</el-button>
        <el-button type="primary" @click="saveDialog">确定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup name="SelectTaskDialog" lang="ts">
import { loadNames, stages } from '@/api/loadProcessingAlgorithm/index';
import { getExperimentList } from '@/api/loadProcessingAlgorithm/loadTaskManagement/index';
const dialogVisiable = ref(false);
const queryFormRef = ref<ElFormInstance>();
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emit = defineEmits(['on-sure']);
const pageLoadTypes = ref([]);
const pageStages = ref(stages);
const loading = ref(false);
const tableDatas = ref([]);
const selectDatas = ref([]);
const dateRangeCreateTime = ref<[DateModelType, DateModelType]>(['', '']);
const queryParams = reactive({
  taskName: '',
  loadType: '',
  loadName: '',
  modelType: '',
  stage: '',
  state: '已完成',
  version: '',
  pageNum: 1,
  pageSize: 10
});
const closeDialog = () => {
  dialogVisiable.value = false;
};
const getPageLoadTypes = () => {
  const obj = loadNames.find((item) => item.label === queryParams.loadName);
  if (obj) {
    pageLoadTypes.value = obj.children;
  } else {
    loadNames.forEach((item) => {
      pageLoadTypes.value = [...pageLoadTypes.value, ...item.children];
    });
  }
};
/** 查询模型列表 */
const getList = async () => {
  loading.value = true;
  loading.value = true;
  const response = await getExperimentList(proxy?.addDateRange(queryParams, dateRangeCreateTime.value, 'CreateTime'));
  tableDatas.value = response.rows;
  loading.value = false;
  loading.value = false;
};
/** 搜索按钮操作 */
function handleQuery() {
  queryParams.pageNum = 1;
  getList();
}
/** 重置按钮操作 */
function resetQuery() {
  queryFormRef.value?.resetFields();
  handleQuery();
}
const handleSelectionChange = (val) => {
  selectDatas.value = val;
};
const openDialog = async (name, model) => {
  queryParams.loadName = name;
  queryParams.modelType = model;
  getList();
  getPageLoadTypes();
  dialogVisiable.value = true;
};
const saveDialog = () => {
  if (selectDatas.value.length) {
    emit('on-sure', selectDatas.value);
    closeDialog();
  } else {
    proxy?.$modal.msgWarning('请选择数据！');
  }
};
defineExpose({
  openDialog
});
</script>

<style lang="scss" scoped>
.dialog-footer {
  text-align: center;
}
</style>
